<template>
    <div class="page-order">
        <div class="page-haeder row">
            <div class="title">订单</div>
        </div>

        <div class="page-body">
            <div class="list">
                <div
                    class="item"
                    v-for="(orderItem, index) in orderList"
                    :key="index"
                >
                    <OrderItem :item="orderItem" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Navigator from "@/components/common/navigator/index";
import OrderItem from "./components/orderItem/index";
import mockData from "./mock";

export default {
    name: "order",
    components: {
        Navigator,
        OrderItem
    },
    data() {
        return {
            orderList: []
        };
    },
    created() {
        this.getOrders();
        this.$bus.$on("createOrder", () => {
            this.getOrders();
        });
    },
    methods: {
        getOrders() {
            this.$cloudApi.getUserOrders().then(res => {
                console.log("getUserOrders", res.data);
                this.orderList = res.data;
            });
        }
    }
};
</script>


<style lang="less" scoped>
.page-order {
    padding: 0 0 110px 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;

    .page-haeder {
        height: 100px;
        line-height: 100px;
        justify-content: center;
        .title {
            font-size: 30px;
            font-weight: 600;
        }
    }

    .page-body {
        height: 100%;
        box-sizing: border-box;
        padding: 0 0 100px 0;
        background: #f5f5f5;
        overflow-y: scroll;

        .list {
            padding: 20px 0;
            .item {
                padding: 0 20px;
                margin-bottom: 20px;
            }
        }
    }
}
</style>